<!--
 * @Description: 月度跳闸统计
 * @Author: Huang Junjie
 * @Date: 2021-06-01 15:05:40
 * @LastEditTime: 2021-10-13 17:03:36
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="monthly-trip-statistics-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>月度跳闸统计</span>
      </div>
      <!-- 标题栏 -->

      <!-- 月度跳闸统计图表 -->
      <div
        id="ColumnChart01"
        class="echart01"
      />
      <!-- 月度跳闸统计图表 -->

      <div class="text-div">
        <div>全月发生跳闸 {{ statistics.totalMonthCount }} 件</div>
        <div v-show="statistics.tongbiFlag === 0" class="item-one">同比 --</div>
        <div v-show="statistics.tongbiFlag !== 0" class="item-one">
          同比 {{ statistics.tongbiPercentage && statistics.tongbiPercentage.toFixed(2) * 100 }}%
        </div>
        <img v-show="statistics.tongbiFlag === 1" class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/red-rise-icon.png')">
        <img v-show="statistics.tongbiFlag === -1" class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/red-decline-icon.png')">
        <div v-show="statistics.huanbiFlag === 0" class="item-two">环比 --</div>
        <div v-show="statistics.huanbiFlag !== 0" class="item-one">
          环比 {{ statistics.tongbiPercentage && statistics.huanbiPercentage.toFixed(2) * 100 }}%
        </div>
        <img v-show="statistics.huanbiFlag === 1" class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/yellow-rise-icon.png')">
        <img v-show="statistics.huanbiFlag === -1" class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/yellow-decline-icon.png')">
      </div>
    </div>
  </div>
</template>

<script>
import { getMonthlyTripData } from '@/api/jjxt/production-safety/bureau-level-home';
import { ColumnChart01 } from './common/js/EchartsModel';

// 引入echarts
const echarts = require('echarts');

export default {
  data() {
    return {
      // 统计数据
      statistics: {
        totalMonthCount: 0,
        tongbiFlag: 0,
        tongbiPercentage: 0,
        huanbiFlag: 0,
        huanbiPercentage: 0,
        data: []
      }
    };
  },
  mounted() {
    this.getMonthlyTripData(); // 查询月度跳闸统计
  },
  methods: {
    // 查询月度跳闸统计
    getMonthlyTripData() {
      getMonthlyTripData().then(res => {
        this.statistics = res.data;
        this.getColumnChart01(res.data); // 加载月度跳闸统计Echarts图表
      });
    },

    // 加载月度跳闸统计Echarts图表
    getColumnChart01(resData) {
      const yAxisData = []; // ['怀化供电段', '长沙供电段', '衡阳供电段', '广州供电段', '深圳供电段', '海口综合维修段']
      const data = [[], []]; // [[]]
      resData.data.forEach(val => {
        yAxisData.push(val.deptName);
        data[0].push(val.beforeMonth);
        data[1].push(val.nowMonth);
      });
      const myChart = echarts.init(document.getElementById('ColumnChart01'));
      ColumnChart01(myChart, yAxisData, data); // 月度跳闸统计 - 柱状图
    }
  }
};
</script>

<style lang="scss" scoped>
.monthly-trip-statistics-style {
  position: relative;
  color: white;
  width: 454px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin: 20px 16px 0 16px;
      padding-bottom: 16px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid #0b62a3;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 0;
      }
    }
    .echart01 {
      position: absolute;
      margin: 0 auto;
      top: 60px;
      right: 0;
      left: 0;
      bottom: 20px;
      width: 430px;
      // height: 380px;
    }
    .text-div {
      position: absolute;
      top: 74px;
      left: 50px;
      display: flex;
      align-items: center;
      font-size: 14px;
      .item-one {
        margin-left: 40px;
      }
      .item-two {
        margin-left: 20px;
      }
      .img {
        margin-left: 5px;
        height: 15px;
        width: 10px;
        object-fit: contain;
      }
    }
  }
}
</style>
